<template>  
  <div>  
    <van-nav-bar title="牙科挂号诊所" />  
  
    <div class="content">  
      <van-cell title="选择医生" class="cell" @click="showDoctors" />  
      <van-cell title="选择时间" class="cell" @click="showTimes" />  
      <van-cell title="填写信息" class="cell" @click="fillInfo" />  
  
      <div class="action-button">  
        <van-button type="primary" block round @click="makeAppointment">预约挂号</van-button>  
      </div>  
    </div>  
  </div>  
</template>  
  
<script>  
export default {  
  methods: {  
    showDoctors() {  
      // 这里可以跳转到医生选择页面  
      console.log('选择医生');  
    },  
    showTimes() {  
      // 这里可以跳转到时间选择页面  
      console.log('选择时间');  
    },  
    fillInfo() {  
      // 这里可以跳转到信息填写页面  
      console.log('填写信息');  
    },  
    makeAppointment() {  
      // 这里是预约挂号的逻辑，可以发送请求到后端进行预约  
      console.log('预约挂号');  
    },  
  },  
};  
</script>  
  
<style scoped>  
.content {  
  padding: 20px;  
}  
  
.cell {  
  margin-bottom: 10px;  
}  
  
.action-button {  
  margin-top: 20px;  
  text-align: center;  
}  
</style>